<template>
	<view class="ys">
		<view class="row" v-if="type == 1">
			<view class="title">
				<text>*</text>请上传房屋照片
			</view>
			<view class="box idcard">
				<view class="imgbox">
					<view class="imgitem" @click="uploadImg('house_img')">
						<image :src="houseInfo.images || '/static/img/sfz.jpg'" mode="aspectFill"></image>
						<text v-if="houseInfo.images == ''">请上传房屋照片</text>
					</view>

				</view>
			</view>
			<view class="title">
				<text>*</text>请选择部门id / 所属社区的id
			</view>
			<view class="box deptbox">
				<view class="li">
					<text>部门/所属社区</text>
					<view class="right">
						<uni-data-picker :preload="true" :border="false" :map="map" placeholder="请选择部门id / 所属社区的id"
							popup-title="部门/所属社区" @change="onchange" :ellipsis="true"
							:localdata="deptRange"></uni-data-picker>
					</view>
				</view>
			</view>
			<view class="title">
				<text>*</text>请填写基本信息
			</view>
			<view class="box">
				<view class="li">
					<text>房屋名称</text>
					<view class="right">
						<input type="text" placeholder="请填写房屋名称" v-model="houseInfo.houseName">
					</view>
				</view>
				<view class="li">
					<text>房屋地址</text>
					<view class="right" @click="chooseLocation">
						{{houseInfo.houseStandardAddress || '点击选择房屋地址'}}
					</view>
				</view>
				<view class="li">
					<text>标准地址</text>
					<view class="right">
						<input type="text" placeholder="请填写房产证的地址" v-model="houseInfo.houseAddress">
					</view>
				</view>

			</view>
			<!-- <view class="title">
				<text>*</text>请填写房间信息
			</view>
			<view class="box">
				<view class="li">
					<text>总房间数</text>
					<view class="right">
						<input type="text" placeholder="请填写总房间数" v-model="houseInfo.totalRooms">
					</view>
				</view>
				<view class="li">
					<text>已出租房间数</text>
					<view class="right">
						<input type="text" placeholder="请填写已出租房间数" v-model="houseInfo.rentedRooms">
					</view>
				</view>
				<view class="li">
					<text>未出租房间数</text>
					<view class="right">
						<input type="text" placeholder="请填写未出租房间数" v-model="houseInfo.availableRooms">
					</view>
				</view>
			</view> -->
		</view>
		<view class="footer">
			<button @click="sumbit" :loading="loading" :disabled="loading">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		addHouse,
	} from "@/api/owner.js"
	import {
		deptNodes
	} from "@/api/api.js"
	export default {
		data() {
			return {
				type: 1,
				loading: false,
				houseInfo: {
					images: '', //房屋照片
					houseStandardAddress: '',
					houseAddress: '',
					// totalRooms: '',
					// rentedRooms:'',
					// availableRooms:'',
					tenantGender: '',
					houseName: '',
					lat: '',
					lng: '',
					deptId: ''
				},
				deptRange: [],
				map: {
					text: 'name',
					value: 'id'
				},
				dept: [],
				parentId: 100
			}
		},
		onLoad(e) {
			if (e.type) this.type = e.type
			// this.getTenantDetail()
			var that = this
			this.deptList()
			uni.getLocation({
				success(e) {
					that.houseInfo.lat = e.latitude
					that.houseInfo.lng = e.longitude
				},
				fail(err) {
					console.log(err);
				}
			})
		},
		methods: {
			onchange(e) {
				let data = e.detail.value
				this.dept = data[data.length - 1]
				this.houseInfo.deptId = this.dept.value
			},
			deptList() {
				deptNodes().then(res => {
					if (res.code == 200) {
						this.deptRange = res.data
					}
				})
			},
			chooseLocation() {
				var that = this
				uni.chooseLocation({
					latitude: Number(that.houseInfo.latitude),
					longitude: Number(that.houseInfo.longitude),
					success(e) {
						that.houseInfo.houseStandardAddress = e.address
						that.houseInfo.lat = e.latitude
						that.houseInfo.lng = e.longitude
					},
					fail(err) {
						console.log(err);
					}
				})
			},
			getTenantDetail() {
				getTenantDetail().then(res => {
					if (res.code == 200) {
						this.houseInfo.tenantId = res.data.tenantId
					}
				})
			},
			uploadImg(type) {
				let that = this
				uni.chooseImage({
					sourceType: ['album', 'camera'], //从相册选择
					count: 1,
					success: (res) => {
						let igmFile = res.tempFilePaths;
						uni.showLoading({
							mask: true,
							title: '加载中'
						})
						for (let i = 0; i < igmFile.length; i++) {
							uni.uploadFile({
								url: `${that.$config.websiteUrl}common/upload`,
								header: {
									'Authorization': uni.getStorageSync('token')
								},
								filePath: igmFile[i],
								name: 'file',
								success: (res) => {
									uni.hideLoading()
									let imgRes = JSON.parse(res.data); //微信和头条支持
									if (imgRes.code == 200) {
										let imgData = imgRes
										// id_card_image: '', //身份证正面照片
										// id_card_image_reverse: '', //身份证反面照
										// id_card_image_hand: '', //手持身份证照
										if (type == 'house_img') {
											that.houseInfo.images = imgData.url
										}
									} else {
										return uni.$showMsg(res.msg)
									}
								},
								fail(err) {
									uni.hideLoading()
								}
							})
						}
					},
				});
			},
			sumbit() {
				if (this.houseInfo.images == '') return uni.$showMsg('请上传房屋照片')
				if (this.houseInfo.deptId == '') return uni.$showMsg('请选择部门id / 所属社区的id')
				if (this.houseInfo.houseName == '') return uni.$showMsg('请填写房屋名称')
				if (this.houseInfo.houseStandardAddress == '') return uni.$showMsg('点击选择房屋地址')
				if (this.houseInfo.houseAddress == '') return uni.$showMsg('请输入标准地址')
				this.loading = true
				addHouse(this.houseInfo).then(res => {
					uni.$showMsg(res.msg)
					this.loading = false
					if (res.code == 200) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.ys {
		background: #F1F4F3;
		height: 100%;
		min-height: 100vh;
		/* #ifdef H5 */
		min-height: calc(100vh - 44px);
		/* #endif */
		box-sizing: border-box;
		padding-top: 10px;
		padding-bottom: 70px;
	}

	radio {
		transform: scale(.7);
	}

	.imgitem {
		position: relative;
		width: 49%;

		image {
			width: 100%;
		}

		text {
			position: absolute;
			top: 75%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 12px;
			color: #777;
			display: block;
			text-align: center;
			width: 100%;
		}
	}


	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #fff;
		padding: 5px 10px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;

		button {
			background: #000;
			color: #1FFD91;
			border-radius: 20px;
			width: 96%;
			margin: 0 auto;
			font-weight: bold;
		}
	}

	.row {
		padding: 0 10px;

		.title {
			display: flex;
			align-items: center;
			font-size: 14px;
			color: #777;
			margin-top: 10px;

			text {
				color: #f00;
			}
		}

		.box {
			background: #fff;
			padding: 10px;
			box-sizing: border-box;
			margin-top: 10px;
			border-radius: 12px;

			textarea {
				font-size: 14px;
				width: 100%;
				box-sizing: border-box;
			}

			&.deptbox {
				.li {
					align-items: center;
					padding: 0;
				}
			}

			.li {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				padding: 15px 0;
				border-bottom: 1px solid #eee;

				.right {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					width: 62%;
					font-size: 14px;
					color: #777;
					text-align: right;
					overflow: hidden;

					input {
						text-align: right;
						font-size: 14px;
						width: 100%;
					}


					.time {
						background: #f2f2f2;
						width: 80px;
						display: block;
						font-size: 12px;
						height: 25px;
						line-height: 25px;
						margin: 0 4px;
						text-align: center;
						color: #777;
					}
				}

				&:last-child {
					border-bottom: 0;
				}
			}

			.noli {
				border-bottom: 0;
				padding-top: 5px;
			}
		}

		.idcard {

			.imgbox {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}

			image {
				width: 100%;
				height: 100px;
			}
		}
	}
</style>